<template>
	<view class="page">
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow" v-if="isTeacher==1" @click="departShow=true">
					<view class="label">
						{{'班级'}}:
					</view>
					<view :class="selecetDepart.departName ? 'val' : 'emty'" >
						{{selecetDepart.departName  ? selecetDepart.departName  : language.accessRecord.tip2 }}
					</view>
				</view>
				<view class="inputRow">
					<view class="label">
						{{'就餐日期'}}:
					</view>
					<view class="val" @click="begEatDateShow=true">
						{{params.begEatDate ? params.begEatDate : '请选择' }}
					</view>
				</view>
			</view>
			<view class="btnBox">
				<view class="btn"  @click="goSearch">
					{{language.consumeRecord.search}}
				</view>
			</view>
		</view>
		<view class="item"  style="" v-if="sumData.length>0 && isTeacher==1">
				<view style="width: 100%;display:grid;justify-content: center;align-items: center;">
						<view class="tagSpan" v-for="(item,index) in sumData" :key="index">
							<text style="">{{item.name}}： {{item.num}} (份)</text>
						</view>
				</view>
		</view>
		
		
		<scrollYBox styleText="height: calc( 100vh - 350rpx );" :list="orderArr" @scrolltolower="scrolltolower">
			<template>
					<view style="padding-bottom: 60rpx;">
						<view class="item" v-for="(item,index) in orderArr" :key="index">
							<view class="row" style="width: 100%;" >
								<view class="label">
									班级：
								</view>
								<view class="val" >
									{{item['depart_name']}}
								</view>
							</view>
							<view class="row" style="width: 100%;" v-for="(item_tiltle,index_title) in orderTitle" :key="index_title">
								<view class="label">
									{{item_tiltle.mealName}}：
								</view>
								<view class="val" >
									{{item['sum_'+item_tiltle.id]}} (份)
								</view>
							</view>
							
						</view>
					</view>
			</template>
		</scrollYBox>		
		
		<u-datetime-picker
		    :show="begEatDateShow" ref="datetimePicker" v-model="begEatDate" 
		    mode="date"  @cancel="begEatDateShow=false" @confirm="begEatDateConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endEatDateShow" ref="datetimePicker" v-model="endEatDate" 
			mode="date"  @cancel="endEatDateShow=false" @confirm="endEatDateConfirm"
		   ></u-datetime-picker>
		   <u-picker :show="departShow" ref="uPicker" :columns="departColumns" @cancel="departShow=false" keyName="departName"
		     @confirm="depatConfirm" @change="departChangeHandler"></u-picker>
	</view>
</template>

<script>
	import {queryPageManageListApi,sumMeals,getDepartlistAllApi} from '@/common/api/commonApi/bookingMeal.js'

	export default {
		data() {
			return {
				params:{
					begEatDate : '',
					endEatDate : '',
					pageNo : 1,
					pageSize: 15,
				},
				begEatDateShow : false,
				endEatDateShow : false,
				begEatDate: Number(new Date()),
				endEatDate: Number(new Date()),
				orderArr : [],
				orderTitle:[],
				totalArr: [],
				total:0,
				selectInfoAccount: uni.getStorageSync('selectInfoAccount'),
				isTeacher: 1,//uni.getStorageSync('isTeacher'),
				departList:[],
				departColumns: [
					// [],[]
				],
				departColumnData: [
				],
				departShow :false,
				selecetDepart : {},
				sumData:[]
			}
		},
		methods: {
			scrolltolower(){
				if(this.total == this.orderArr.length){
					return this.setMessage('没有更多了')
				}
				this.params.pageNo ++
				this.getList()
			},
		
			departChangeHandler(e) {
				console.log(e);
			    const {
			        columnIndex,
			        value,
			        values, // values为当前变化列的数组内容
			        index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
			        picker = this.$refs.uPicker
			    } = e
				// console.log(picker);
			    // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			    if (columnIndex === 0) {
			        // picker为选择器this实例，变化第二列对应的选项
			        // picker.setColumnValues(1, this.departColumnData[index])
			        picker.setColumnValues(1, value[index].children)
			    }else if(columnIndex==1){
					if(value[1].children&&value[1].children.length){
						// picker.setColumnValues(2, [])
						picker.setColumnValues(2, value[1].children)
					}else {
						// if(this.departColumns.length==3){
							// console.log(111);
							picker.setColumnValues(2, [])
							// this.departColumns.splice(2,1)
							// console.log(this.departColumns);
						// }
						
						// picker.setColumnValues(2, [])
					}
				}
			},
			// 回调参数为包含columnIndex、value、values
			depatConfirm(e) {
			    console.log('confirm', e)
				this.selecetDepart = e.value[e.value.length-1] ? e.value[e.value.length-1] : e.value[e.value.length-2]
			    this.departShow = false
			},
			getDepart(){
				let params = {}
				getDepartlistAllApi(params).then(res=>{
					let arr = this.listToTree(res.result)
					console.log(arr);
					// this.departList = arr
					this.departColumnData = arr
					if(arr.length) this.departColumns[0] = arr
					if(arr.length && arr[0].children.length) this.departColumns[1] = arr[0].children
					if(arr.length && arr[0].children.length && arr[0].children[0].length) this.departColumns[2] = arr[0].children[0]
					
					return console.log(arr);
					
				})
			},
			goSearch(){
				// if(this.params.begEatDate && this.params.endEatDate && this.isTeacher==2){
				// 	if(new Date(this.params.begEatDate) > new Date(this.params.endEatDate) ) return this.setMessage('开始时间不能大于结束时间')
				// }
				this.params.page = 1
				this.initInfoByTeacher()
				
			},
			begEatDateConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.params.begEatDate = date
				console.log(this.params.begEatDate);
				this.begEatDateShow = false
			},
			endEatDateConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.params.endEatDate = date
				this.endEatDateShow = false
			},
			initInfoByTeacher(){
				let data = {
					status : 3,
					diningDay_begin : this.params.begEatDate,
					diningDay_end : this.params.begEatDate,
					pageNo : this.params.pageNo,
					pageSize : this.params.pageSize,
				} 
				
				if(this.isTeacher==1){
					let tempArr = this.selectInfoAccount.positionList
					let obj = {
						positionType: 0
					}
					tempArr.forEach(item=>{
						if(item.positionType > obj.positionType) obj = item
					})
					data.departmentId = obj.departmentId?obj.departmentId:''
					data.departmentId = this.selecetDepart.id ? this.selecetDepart.id : data.departmentId
				}
				return sumMeals(data).then(res=>{
					if(this.params.pageNo==1) this.orderArr = []
					this.orderTitle=res.result.title;
					this.sumData=res.result.count;
					
					this.orderArr = this.orderArr.concat(res.result.data.records)
					this.total = res.result.data.total
					
				})
			},
			
		},
		async onLoad({isTeacher}) {
			let date = new Date();
			let year = date.getFullYear();//
			let month = date.getMonth() + 1;
			let day  = date.getDate();
			month = month.toString().padStart(2,'0')
			day = day.toString().padStart(2,'0')
			this.params.begEatDate = `${year}-${month}-${day}`;
			this.params.endEatDate = `${year}-${month}-${day}`;
			if(isTeacher) this.isTeacher = isTeacher
			this.goSearch()
			this.getDepart()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.weight{
		font-weight: 600;
	}
	.totalVal{
		font-weight: 400;
		color: #666;
		display: flex;
		justify-content: center;
	}
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			flex: 1;
			padding-right: 30rpx;
			.inputRow{
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	

.page{
	.item{
		background-color: #fff;
		border-top: 2rpx solid #eaebef;
		margin: 20rpx;
		border-radius: 10px;
		padding: 15rpx 15rpx;
		display: flex;
		flex-wrap: wrap;
		.row{
			font-size: 32rpx;
			display: flex;
			width: 50%;
			// border-bottom: 2rpx solid #eaebef;
			.label{
				// max-width: 160rpx;
				display: flex;
				align-items: center;
				// justify-content: flex-end;
				padding-right: 15rpx;
				color: #000000d9;
				font-size: 30rpx;
				white-space: nowrap;
			}
			.val{
				flex: 1;
				padding: 15rpx 0;
				display: flex;
				align-items: center;
				text{
					padding: 20rpx;
				}
				font-size: 28rpx;
				color: #595959;
			}
			.input{
				padding: 10rpx 0;
				flex: 1;
				display: flex;
				align-items: center;
			}
			
			.btns{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 55rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: #ff9900;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
